@{
    ViewData["Title"] = "班组管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>班组管理</h3>
                </div>
                <div class="layui-card-body">
                    <!-- 搜索条件 -->
                    <div class="layui-form layui-form-pane" lay-filter="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="keyword" placeholder="班组编号、班组名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">班组类型</label>
                                <div class="layui-input-inline">
                                    <select name="teamType" lay-search="">
                                        <option value="">全部类型</option>
                                        <option value="注塑">注塑</option>
                                        <option value="机加工">机加工</option>
                                        <option value="组装">组装</option>
                                        <option value="仓库">仓库</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>

                    <!-- 工具栏 -->
                    <div class="layui-row" style="margin-bottom: 10px;">
                        <div class="layui-col-md12">
                            <button type="button" class="layui-btn" id="btnAdd">
                                <i class="layui-icon layui-icon-add-1"></i> 新增班组
                            </button>
                            <button type="button" class="layui-btn layui-btn-danger" id="btnBatchDelete">
                                <i class="layui-icon layui-icon-delete"></i> 批量删除
                            </button>
                        </div>
                    </div>

                    <!-- 数据表格 -->
                    <table class="layui-hide" id="teamTable" lay-filter="teamTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="operationBar">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
</script>

<!-- 班组成员模板 -->
<script type="text/html" id="memberTpl">
    {{# if (d.members && d.members.length > 0) { }}
        {{# layui.each(d.members, function(index, item){ }}
            <span class="layui-badge layui-bg-blue" style="margin: 2px;">{{item.userNickname || item.username}}</span>
        {{# }); }}
    {{# } else { }}
        <span class="layui-text-muted">暂无成员</span>
    {{# } }}
</script>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/layui/layui.js"></script>

<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        // 渲染表格
        var tableIns = table.render({
            elem: '#teamTable',
            url: '/Team/GetList',
            contentType: 'application/json',
            method: 'POST',
            page: true,
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'teamNumber', title: '班组编号', width: 150, sort: true },
                { field: 'teamName', title: '班组名称', width: 200 },
                { field: 'teamType', title: '班组类型', width: 120 },
                { field: 'descr', title: '描述', width: 200 },
                { field: 'members', title: '班组成员', templet: '#memberTpl', minWidth: 250 },
                { fixed: 'right', title: '操作', toolbar: '#operationBar', width: 150 }
            ]],
            request: {
                pageName: 'page',
                limitName: 'pageSize'
            },
            where: {
                page: 1,
                pageSize: 10,
                sorting: 'Id desc'
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 搜索
        form.on('submit(search)', function (data) {
            var field = data.field;
            tableIns.reload({
                where: {
                    keyword: field.keyword,
                    teamType: field.teamType,
                    page: 1,
                    pageSize: 10,
                    sorting: 'Id desc'
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });

        // 新增班组
        $('#btnAdd').on('click', function () {
            layer.open({
                type: 2,
                title: '新增班组',
                area: ['80%', '90%'],
                content: '/Team/AddEdit',
                end: function () {
                    tableIns.reload();
                }
            });
        });

        // 批量删除
        $('#btnBatchDelete').on('click', function () {
            var checkStatus = table.checkStatus('teamTable');
            if (checkStatus.data.length === 0) {
                layer.msg('请选择要删除的数据');
                return;
            }

            layer.confirm('确定要删除选中的班组吗？', function (index) {
                var ids = [];
                layui.each(checkStatus.data, function (index, item) {
                    ids.push(item.id);
                });

                // 批量删除逻辑
                var deletePromises = ids.map(function (id) {
                    return $.post('/Team/Delete', { id: id });
                });

                Promise.all(deletePromises).then(function () {
                    layer.msg('删除成功');
                    tableIns.reload();
                }).catch(function (error) {
                    layer.msg('删除失败：' + error);
                });

                layer.close(index);
            });
        });

        // 监听行工具事件
        table.on('tool(teamTable)', function (obj) {
            var data = obj.data;
            
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑班组',
                    area: ['80%', '90%'],
                    content: '/Team/AddEdit?id=' + data.id,
                    end: function () {
                        tableIns.reload();
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除这个班组吗？', function (index) {
                    $.post('/Team/Delete', { id: data.id }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg('删除失败：' + res.msg);
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html> 